<template>
  <div class="layout-editor-container">
    <div class="editor-box">
      <div class="editor-infos-box">
        <div class="controller-btn">
          <div>
            <el-row>
              <span class="heightSpan">预设高度：</span>
              <el-radio-group
                v-model="inputsHeight"
                @change="handleChangeColHeight"
                size="mini"
              >
                <el-radio-button :label="100" />
                <el-radio-button :label="220" />
                <el-radio-button :label="300" />
                <el-radio-button :label="0" />
              </el-radio-group>
            </el-row>
            <el-row>
              <span class="heightSpan">自定义高度：</span>
              <el-input
                style="width: 203px"
                size="small"
                v-model="inputsHeight"
                @change="handleChangeColHeight"
              ></el-input>
            </el-row>
          </div>
          <div>
            <el-button type="primary" size="medium" @click="handleAverage"
              >平均布局</el-button
            >
            <el-button type="primary" size="medium" @click="handleRemove"
              >删除布局</el-button
            >
            <el-button type="primary" size="medium" @click="handleAdd"
              >添加布局</el-button
            >
          </div>
        </div>
      </div>
      <div class="editor-infos-box suggest">
        组件高度设置需参考组件基本信息，不正确的高度可能导致显示错误,设置为0时为自适应高度，无固定高度（主要适用于表格）。设置高度小于等于100时默认100，并适用于方格组件。
      </div>
      <div class="editor-inputs-box">
        <div
          class="input-item-box"
          v-for="(ipt, iptIndex) in inputs"
          :key="iptIndex"
        >
          <el-input
            size="mini"
            :maxlength="3"
            :minlength="1"
            :max="24"
            :min="1"
            v-model="ipt.value"
          />
        </div>
      </div>
    </div>
    <div
      class="layout-preview-box"
      draggable="true"
      @dragstart="handleDragRow($event, inputs)"
      @dragend="hanDragRowEnd($event, inputs)"
    >
      <div
        class="preview-item"
        v-for="(ipt, iptIndex) in inputs"
        :key="iptIndex"
        :style="
          previewColStyle({
            width: ipt.value,
            height: ipt.height != 0 ? ipt.height : 300,
          })
        "
      >
        {{ ipt.value }}
      </div>
    </div>
    <div class="suggest-layout-box">
      <div class="suggest-layout-title">预设常用布局</div>
      <div
        class="suggest-layout-row"
        v-for="(suggestLayout, suggestLayoutIndex) in suggestLayouts"
        :key="suggestLayoutIndex"
        draggable="true"
        @dragstart="handleDragRow($event, suggestLayout.cols)"
        @dragend="hanDragRowEnd($event, suggestLayout.cols)"
      >
        <div
          class="suggest-layout-item"
          :style="
            previewColStyle({
              width: col.value,
              height: col.height != 0 ? col.height : 300,
            })
          "
          v-for="(col, colIndex) in suggestLayout.cols"
          :key="colIndex"
        >
          {{ col.value }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import colStyle from '../..//mixins/methods/col-style'

export default {
  name: 'default-layout-editor',
  mixins: [colStyle],
  data() {
    return {
      inputsHeight: 220,
      inputs: [{ height: 220, value: 24 }],
      suggestLayouts: [
        {
          cols: [
            { height: 100, value: 4.8 },
            { height: 100, value: 4.8 },
            { height: 100, value: 4.8 },
            { height: 100, value: 4.8 },
            { height: 100, value: 4.8 },
          ],
        },
        {
          cols: [
            { height: 100, value: 6 },
            { height: 100, value: 6 },
            { height: 100, value: 6 },
            { height: 100, value: 6 },
          ],
        },
        {
          cols: [
            { height: 220, value: 12 },
            { height: 220, value: 12 },
          ],
        },
        {
          cols: [
            { height: 220, value: 8 },
            { height: 220, value: 8 },
            { height: 220, value: 8 },
          ],
        },
        { cols: [{ height: 0, value: 24 }] },
      ],
    }
  },
  methods: {
    handleDragRow(event, row) {
      this.$emit( 'drag-row-start', event, row)
    },
    hanDragRowEnd(event, row) {
      this.$emit( 'drag-row-end', event, row)
    },
    handleChangeColHeight(height) {
      this.inputs.forEach((input) => (input.height = height))
    },
    handleAverage() {
      let averageCol = 24 / this.inputs.length
      this.inputs.forEach((input) => (input.value = averageCol))
    },
    handleRemove() {
      if (this.inputs.length === 1) {
        this.$message.error('至少需要一列布局')
        return
      }

      this.inputs.splice(this.inputs.length - 1, 1)
    },
    handleAdd() {
      if (this.inputs.length === 24) {
        this.$message.error('至多只能有二十四列布局')
        return
      }
      this.inputs.push({ value: 0, height: this.inputsHeight })
    },
  },
  emits: ['drag-row-start', 'drag-row-end'],
}
</script>

<style lang="scss" scoped>
@import '../../styles/variable.scss';
.heightSpan {
  font-size: 14px;
  white-space: nowrap;
  font-weight: normal;
  display: inline-block;
  min-width: 85px;
  text-align: right;
}
.layout-editor-container {
  @include default-flex;
  align-content: flex-start;
  margin: 10px;
  flex-wrap: wrap;
  overflow: auto;
  .editorTitle {
    text-align: left;
    font-size: 16px;
  }
  & .editor-box {
    @include default-flex;
    @include flex-full;
    flex-wrap: wrap;
    min-height: 130px;
    & .editor-infos-box {
      @include default-flex;
      @include flex-full;
      &.suggest {
        color: $success-color;
        margin: 5px 0;
      }
      & .infos {
        margin: 0 10px;
        & div {
          padding: 2px 0;
        }
        & .limit {
          color: $danger-color;
        }
      }
      & .controller-btn {
        @include default-flex;
        @include cur-p;
        @include btn-icon;
        justify-content: space-between;
        flex: 1;
      }
    }
    & .editor-inputs-box {
      @include default-flex;
      @include flex-full;
      justify-content: space-around;
      flex-wrap: wrap;
      & .input-item-box {
        width: 50px;
      }
    }
  }
  & .layout-preview-box {
    @include default-flex;
    @include cur-all;
    @include flex-full;
    min-height: 150px;
    & .preview-item {
      @include default-col-style;
      @include default-col-layout;
    }
  }
  & .suggest-layout-box {
    @include default-flex;
    @include flex-full;
    flex-wrap: wrap;
    overflow: auto;
    & .suggest-layout-title {
      margin-top: 10px;
      @include btn-icon;
    }
    & .suggest-layout-row {
      @include default-flex;
      @include cur-all;
      @include flex-full;
      margin: 5px 0;
      & .suggest-layout-item {
        @include default-col-style;
        @include default-col-layout;
      }
    }
  }
}
</style>
